<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps<{
  initial?: number
}>()

const count = ref(props.initial || 0)

const increment = () => {
  count.value++
}

defineExpose({
  count,
  increment
})
</script>

<template>
  <div class="counter">
    <button @click="increment">
      Count: {{ count }}
    </button>
  </div>
</template>

<style scoped>
.counter button {
  padding: 0.5em 1em;
  font-size: 1em;
}
</style> 